<template>
<div>
  <el-table
    :data="tableData"
    stripe
    style="width:681px;margin:0 auto">
    <el-table-column
      label="产品编号"
      width="100">
      <template slot-scope="scope">
        
      <span style="margin-left: 10px">{{ scope.$index+1}}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="产品名字"
      width="100">
      <template slot-scope="scope">
        <p>{{scope.row.name}}</p>
      </template>
    </el-table-column>
    <el-table-column
      label="购买数量"
      width="180"
    >
      <template slot-scope="scope">
        <el-input-number v-model="scope.row.num"  :min="1" :max="100" label="描述文字" size="small" step-strictly></el-input-number>
      </template>
    </el-table-column>
    <el-table-column
      label="产品单价"
      width="100"
    >
      <template slot-scope="scope">
        <p>{{scope.row.price}}</p>
      </template>
    </el-table-column>
    <el-table-column
      label="产品总价"
      width="100"
    >
      <template slot-scope="scope">
        <p>{{scope.row.price*scope.row.num}}</p>
      </template>
    </el-table-column>
    <el-table-column 
    label="操作"
    width="100"
    >
      <template slot-scope="scope">
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index,scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-row>
    <el-col :span="4"><span>购买总价:</span></el-col>
    <el-col :span="4">{{totalPrice}}</el-col>
    <el-col :span="6"><span>购买总数量:</span></el-col>
    <el-col :span="5">{{totalNum}}</el-col>
    <el-col :span="5" class="btn"><el-button type="danger" size="mini" @click="Clear">清空购物车</el-button></el-col>
  </el-row>
</div>
</template>

<script>
export default {
  name: 'cart',
  data() {
    return {
       tableData: [{
          name: 'iphone',
          num:'8',
          price:'8000'
        }, 
        {
          name: 'HuaWei',
          num:'5',
          price:'7000'
        }, {
          
          name: 'oppo',
          num:'2',
          price:'6000'
        }, {
          
          name: 'vivo',
          num:'5',
          price:'5000'
        }]
    }
  },
   methods: {
      handleDelete(index,row) {
        this.tableData.splice(index, 1);
        console.log(index,row);
        
      },
      Clear(){
      this.tableData=[];
    }
    },
    computed: {
      totalPrice(){
        let  sum = 0;
				for (var i = 0; i < this.tableData.length; i++) {
							sum += this.tableData[i].price * this.tableData[i].num;
						}
				return sum;
      },
      totalNum(){
        let sum = 0;
        for (var i = 0; i < this.tableData.length; i++) {
							sum += this.tableData[i].num;
						}
				return sum;
      }

    },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.el-row{
  width: 681px;
  margin: 0 auto;
  margin-top: 10px;
  padding-left: 10px;
}
.btn{
  padding-left: 15px;
}
</style>
